<template>
  <div class="choose-content">
    <ChooseHead />
    <van-tabs v-model:active="activeId" @change="switchCate">
      <van-tab v-for="list in lists" :key="list.id" :title="list.name" :name="list.id">
        <div class="box" v-if="(activeId === homeId)">
          <van-grid :gutter="10" square>
            <van-grid-item class="icon1" icon-prefix="icon" icon="xiaoliang" text="销量榜" />
            <van-grid-item class="icon2" icon-prefix="icon" icon="jushoucang" text="关注榜单" />
            <van-grid-item class="icon3" icon-prefix="icon" icon="xiazai" text="降价榜" />
            <van-grid-item class="icon4" icon-prefix="icon" icon="jiangbei" text="口碑榜" />
          </van-grid>
          <!-- <div class="lists">
            <div class="list" v-for="list in lists" :key="list.id" @click="switchCate">
              <img :src="list.icon" alt="">
              <p>{{ list.name }}</p>
            </div>
          </div> -->
        </div>
      </van-tab>
    </van-tabs>


    <div v-if="!items.length" class="nothing">暂无数据</div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="reachBottom">
      <div class="items">
        <div class="item" v-for="item in items" :key="item.id" @click="enterDetail(item.id)">
          <img :src="item.pic" alt="">
          <div class="item-info">
            <h5>{{ item.name }}</h5>
            ￥<span>{{ item.originalPrice }}</span>
            <van-icon class="addCart" class-prefix="icon" name="gouwuchetianjia" size="20PX" />
          </div>
        </div>
      </div>
    </van-list>
    <CommonTabbar />
  </div>
</template>

<script setup lang="ts" name="choose">
import ChooseHead from './component/ChooseHead.vue'
import CommonTabbar from '@/components/CommonTabbar.vue';
import { fetchCates, fetchList } from '@a/index';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
let homeId = -1
const activeId = ref<number>(-1)
const router = useRouter()
const lists = ref<any[]>([])
const getLists = () => {
  fetchCates().then(res => {
    console.log(res);
    if (res.data.code === 0) {
      lists.value = res.data.data
      activeId.value = res.data.data[0].id
      homeId = res.data.data[0].id
    }
  })
}
//跳转详情
const enterDetail = (id: number) => {
  router.push({
    path: '/details',
    query: {
      id
    }
  })
}
//点击tab 切换不同分类
const switchCate = () => {
  //上拉加载分页状态
  items.value = []
  finished.value = false
  page.value = 1
  //重新请求商品列表
  fetchItemsByCateId(activeId.value)
}
//上拉加载 商品列表
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const reachBottom = () => {
  //触底事件发生 page+1 重新请求商品列表
  page.value++
  fetchItemsByCateId(activeId.value)
}
// 获取商品列表
const items = ref<Array<any>>([])
const page = ref<number>(1)
const pageSize = ref<number>(5)
const fetchItemsByCateId = (cateId: number) => {
  fetchList({
    categoryId: cateId,
    page: page.value,
    pageSize: pageSize.value
  }).then(res => {
    console.log(res);
    loading.value = false
    if (res.data.code === 0) {
      items.value = [
        ...items.value,
        ...res.data.data.result
      ]
    }

  })
}
onMounted(() => {
  getLists()
  // fetchItemsByCateId()
})
</script>

<style lang="scss" scoped>
:deep .icon1 .van-grid-item__content {
  border-radius: 10px;
  --van-grid-item-content-background: linear-gradient(to top right, #ff822f, #ff9b58);
  --van-grid-item-text-color: #fff;
  margin-top: 10px;

  .icon {
    color: #fff;
  }
}

:deep .icon2 .van-grid-item__content {
  border-radius: 10px;
  --van-grid-item-content-background: linear-gradient(to top right, #4754ff, #7588ff);
  --van-grid-item-text-color: #fff;
  margin-top: 10px;

  .icon {
    color: #fff;
  }
}

:deep .icon3 .van-grid-item__content {
  border-radius: 10px;
  --van-grid-item-content-background: linear-gradient(to top right, #05f, #79a6ff);
  --van-grid-item-text-color: #fff;
  margin-top: 10px;

  .icon {
    color: #fff;
  }
}

:deep .icon4 .van-grid-item__content {
  border-radius: 10px;
  --van-grid-item-content-background: linear-gradient(to top right, #5dd7ff, #00b1ef);
  --van-grid-item-text-color: #fff;
  margin-top: 10px;

  .icon {
    color: #fff;
  }
}

.choose-content {
  padding-top: 50px;
  background-color: #fff;
}

.lists {
  padding-top: 30px;
  padding-left: 20px;

  .list {
    height: 60px;
    display: flex;
    align-items: center;

    img {
      width: 40px;
      height: 40px;
      margin: 10px 16px 10px 0;
    }

    p {
      font-size: 16PX;
    }
  }
}

.item {
  height: 110px;
  display: flex;
  padding: 10px;
  background-color: #fff;
  margin-top: 10px;

  img {
    width: 4rem;
  }

  .item-info {
    flex: 1;
    padding: 0 10px;

    h5 {
      width: 5rem;
      line-height: 40px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top: 5px;
    }

    span {
      font-size: 20PX;
      color: #ec1109;
    }

    .addCart {
      /* margin-left: 100PX; */
      float: right;
      margin-right: 5px;
    }

    .item-action {
      display: flex;
      justify-content: space-between;

      p {
        font-size: 20PX;
        color: #ec1109;
      }

    }
  }


}


.nothing {
  text-align: center;
  font-size: 20PX;
  margin: 10px 0;
  background-color: #f1f1f1;
}
</style>